<template>
	<view class="findWorkers">
		<!-- 筛选区域 -->
		<view class="screen delUp" :class="isFixed?'fixed':''" :style="{'top': top +'rpx'}">
			<up-dropdown>
				<!-- 	<up-dropdown-item v-model="params.city" title="全国" :options="options1"></up-dropdown-item> -->
				<up-dropdown-item v-model="params.work_type" :title="selectedTypeLabel" :options="workType"
					@change="oncheck2" height="200" />
				<up-dropdown-item v-model="params.work_year" :title="selectedYearLabel" :options="YearData"
					@change="oncheck3" height="200"/>
			</up-dropdown>
		</view>

		<!-- 没有数据且未加载时的提示 -->
		<view class="nullData" v-if="arrList.length == 0 && !isLoading" :style="isFixed ? {'padding-top': top + 120 +'rpx'} : {'padding-top': 0 +'rpx'}">
			<image src="https://img.zhizhuangtong.com/project_media/img/xcx/null.png" mode=""></image>
			<text>暂无数据</text>
		</view>

		<!-- 数据列表 -->
		<view class="list" v-else :style="isFixed ? {'padding-top': top + 180 +'rpx'} : {'padding-top': 0 +'rpx'}">
			<view class="row" v-for="(item, index) in arrList" :key="index">
				<up-avatar :src="item.user?.avatar" class="avatar"></up-avatar>
				<view class="rightRow">
					<view class="top">
						<view class="info">
							<view class="title">
								{{ item.user?.real_name }}
								<view class="type" v-if="item.user?.real == 1">已实名</view>
							</view>
							<view class="desc">
								<text class="col">{{ item.work_type_text }}</text>
								<text class="col"> • {{ item.work_year }}经验</text>
							</view>
						</view>
						<!-- <view class="edit" @click="nunllClick">
							<button>联系Ta</button>
						</view> -->
					</view>
					<view class="address">
						<image src="../../static/home/address.png" mode=""></image>
						服务范围：{{ item.service_area }}
						<text v-if="item.out == 1">(支持异地)</text>
					</view>
				</view>
			</view>
		</view>

		<view v-if="isLoading" class="load-more-box">
			<text>加载中...</text>
		</view>

		<view v-if="arrList.length !== 0 && !isLoading && !hasMoreData" class="load-more-box">
			<text>已经到底了</text>
		</view>
	</view>
</template>

<script setup>
	import {
		search_builder,
		type_list
	} from '@/api/findworks.js';
	import {
		onMounted,
		ref,
		defineProps
	} from 'vue';

	// 筛选条件选项
	const options1 = ref([{
			label: '默认排序',
			value: 1
		},
		{
			label: '距离优先',
			value: 2
		},
		{
			label: '价格优先',
			value: 3
		},
	]);

	// 工作类型和工作年限
	const selectedTypeLabel = ref('工种');
	const workType = ref([]);
	const selectedYearLabel = ref('经验');
	const YearData = ref([]);

	// 数据列表、加载状态和分页参数
	const arrList = ref([]);
	const isLoading = ref(false);
	const hasMoreData = ref(true);
	const params = ref({
		city: '',
		work_type: '',
		work_year: '',
		page: 1,
		page_size: 20,
	});

	// 初始化数据
	onMounted(() => {
		queryYearData();
		queryList();
	});

const porps = defineProps({
	  isFixed: Boolean,
	  top: String
	});

	// 验收需求
	const nunllClick = () => {
		wx.showToast({
			title: '功能正在开发中！',
			icon: 'none',
			duration: 2000
		});
	}
	// 获取工作年限和工种
	const queryYearData = async () => {
		const res = await type_list();
		if (res.code == 1) {

			workType.value = [{
				label: '全部',
				value: ''
			}, ...res.data.work_type.map(item => ({
				label: item.name,
				value: item.id,
			}))];

			YearData.value = [{
				label: '全部',
				value: ''
			}, ...res.data.work_year.map(item => ({
				label: item.name,
				value: item.id,
			}))];

			// workType.value = res.data.work_type.map(item => ({
			// 	label: item.name,
			// 	value: item.id,
			// }));


			// YearData.value = res.data.work_year.map(item => ({
			// 	label: item.name,
			// 	value: item.id,
			// }));
		}
	};

	// 处理工种选择变化
	const oncheck2 = (selectedValue) => {
		params.value.work_type = selectedValue;
		const selectedItem = workType.value.find(item => item.value === selectedValue);
		if (selectedItem) {
			selectedTypeLabel.value = selectedItem.label;
		}
		params.value.page = 1
		arrList.value = []
		queryList();
	};

	// 处理工作年限选择变化
	const oncheck3 = (selectedValue) => {
		params.value.work_year = selectedValue;
		const selectedItem = YearData.value.find(item => item.value === selectedValue);
		if (selectedItem) {
			selectedYearLabel.value = selectedItem.label;
		}
		params.value.page = 1
		arrList.value = []
		queryList();
	};

	// 请求数据列表
	const queryList = async () => {
		if (isLoading.value) return;
		isLoading.value = true;
		const res = await search_builder(params.value);
		if (res.code == 1) {
			if (params.value.page === 1) {
				arrList.value = res.data.list;
			} else {
				arrList.value.push(...res.data.list);
			}
			// 判断是否还有更多数据
			if (res.data.list.length < params.value.page_size) {
				hasMoreData.value = false; // 没有更多数据
			} else {
				hasMoreData.value = true; // 还有更多数据
			}


			// 页码递增
			params.value.page += 1;
		}
		setTimeout(() => {
			isLoading.value = false;
		}, 500);

	};

	// 重置查询条件并重新加载数据
	const update = () => {
		params.value.page = 1;
		params.value.city = '';
		params.value.work_type = '';
		params.value.work_year = '';
		queryList();
	};

	// 对外暴露方法
	defineExpose({
		queryList,
		params,
		update,
		hasMoreData,
	});
</script>



<style lang="less" scoped>
	.fixed{
		position: fixed !important;
		left: 0 !important;
		width: 100% !important;
		z-index: 999 !important;
		background-color: #fff;
	}
	.findWorkers {
		width: 100%;
		height: 100%;

		.screen {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			// border-bottom: 1rpx solid #E4E4E4;

		}

		.nullData {
			height: calc(100% - 110rpx);
		}




		.list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			padding: 0 30rpx 10px;
			box-sizing: border-box;

			.row {
				width: 100%;
				padding: 40rpx 0;
				border-bottom: 1rpx solid #E4E4E4;
				box-sizing: border-box;
				display: flex;

				&:first-child {
					border-top: none;
				}

				.avatar {
					width: 90rpx;
					height: 90rpx;
				}

				.rightRow {
					flex: 1;
					display: flex;
					align-items: flex-start;
					flex-wrap: wrap;
					box-sizing: border-box;
					padding: 0 20rpx;

					.top {
						flex: 1;
						display: flex;

						.info {
							flex: 1;
							display: flex;
							flex-wrap: wrap;
							align-items: center;
							// height: 80rpx;
							padding-bottom: 22rpx;

							.title {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 500;
								font-size: 30rpx;
								color: #333333;
								line-height: 30rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								width: 100px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								width: 100%;
								display: flex;
								align-items: center;

								.type {
									font-family: Source Han Sans CN, Source Han Sans CN;
									margin-left: 10rpx;
									font-weight: 400;
									font-size: 22rpx;
									color: #12C241;
									text-align: left;
									font-style: normal;
									text-transform: none;
									padding: 5rpx 10rpx;
									background: #FFFFFF;
									border-radius: 4rpx 4rpx 4rpx 4rpx;
									border: 1rpx solid #12C241;
									display: flex;
									justify-content: center;
									align-items: center;
								}
							}

							.desc {
								width: 100%;
								display: flex;
								align-items: center;
								height: 30rpx;
								margin-top: 15rpx;
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: #999999;
								line-height: 30rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;

								.col {
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;

									&:nth-child(1) {
										max-width: 250rpx;
									}
								}
							}
						}

						.edit {
							width: 160rpx;

							button {
								width: 100%;
								height: 60rpx !important;
								background: linear-gradient(113deg, #F2BD6F 0%, #CCA05F 100%) !important;
								border-radius: 8rpx 8rpx 8rpx 8rpx;

								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 500;
								font-size: 28rpx;
								color: #FFFFFF;
								line-height: 60rpx;
								text-align: center;
								font-style: normal;
								text-transform: none;
							}
						}

					}


					.address {
						display: flex;
						align-items: center;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 26rpx;
						color: #333333;
						line-height: 30rpx;
						height: 30rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						width: 100%;

						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						image {
							width: 25rpx;
							height: 25rpx;
							margin-right: 10rpx;
						}
					}

				}


			}


		}

		.load-more-box {
			text-align: center;
			width: 100%;
			padding-top: 20rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			color: #7A7A7A;
		}
	}
</style>